<template>
  <view>
    <view v-if="empty == 'isempty'" class="empty">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>
    <view class="section">
      <u-list
        :scrollTop="30"
        height="600"
        :style="height"
        :enableBackToTop="true"
        v-if="empty == 'notempty'"
        :preLoadScreen="page * 5"
        @scrolltolower="scrolltolower"
        :pagingEnabled="true"
      >
        <u-list-item v-for="item in prolist" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              @click="action"
              :name="item.id"
              :options="options"
            >
              <view class="card" @click="toEdit(item.id)">
                <view class="left">
                  <view class="img">
                    <u-image
                      :src="'https://adjyxw.h1668.com' + item.thumb"
                      width="80px"
                      height="80px"
                    >
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text">
                    <span>标题:</span>
                    <span>{{ item.name }}</span>
                  </view>

                  <view class="text">
                    <span>最大值:</span>
                    <span>{{ item.max }}</span>
                  </view>
                  <view class="text">
                    <span>最小值:</span>
                    <span>{{ item.min }}</span>
                  </view>

                  <view class="text">
                    <span>左边显示:</span>
                    <span v-if="item.inleft == 1">是</span>
                    <span v-if="item.inleft == 0">否</span>
                  </view>

                  <view class="text">
                    <span>右边显示:</span>
                    <span v-if="item.inright == 1">是</span>
                    <span v-if="item.inright == 0">否</span>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>
      </u-list>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
    <u-modal
      :show="show"
      :content="content"
      showCancelButton
      @confirm="confirm"
      @cancel="cancel"
    />

    <view class="btnstyle">
      <u-button
        type="primary"
        class="custom-style"
        @click="addhire"
        text="添加盲盒"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();

    this.list();
    this.branks();
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      padding: "150rpx 0rpx",
      options: [
        {
          text: "添加",
          style: {
            backgroundColor: "#3c9cff",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      content: "是否下架该商品",
      auth: {},
      page: 1,
      empty: "",
      keyword: "",
      prolist: [],
      brand_id: 0,
      bilndid: 0,
      loadshow: false,
      show: false,
      branklist: [],
    };
  },
  methods: {
    addhire() {
      uni.$u.route({
        url: "/pagesC/product/blind/add",
      });
    },
    action(item) {
      // 添加
      if (item.index == 0) {
        uni.$u.route({
          url: "/pagesC/product/blind/add",
        });
      }
      // 下架
      if (item.index == 1) {
        this.show = true;
        this.bilndid = item.name;
      }
    },
    async confirm() {
      this.show = false;

      var data = {
        bilndid: this.bilndid,
        adminid: this.auth.id,
      };

      var result = await this.$u.api.blind.delete(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
        });
        setTimeout(() => {
          this.list();
          this.branks();
        }, 350);
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },

    delete() {
      uni.showModal({
        title: "温馨提示",
        content: "确定要下架吗？",
        success: (res) => {
          if (res.confirm) {
            this.show1 = false;
          }
        },
      });
    },

    async list() {
      // 最高管理员需传输的数据

      var result = await this.$u.api.blind.blindindex();
      if (result.code) {
        if (Array.isArray(result.data) && result.data.length > 0) {
          this.empty = "notempty";

          this.prolist = result.data;
          this.page = 1;
        } else {
          this.status = "nomore";
        }
      }
    },
    async actionlist() {
      let data = {
        adminid: this.auth.id,
        brand_id: this.brand_id,
        page: this.page,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.hire.action(data);

      if (result.code) {
        if (result.data.action == "isempty") {
          this.empty = "isempty";
        } else {
          this.empty = "notempty";

          this.prolist = result.data.action;
        }
      }
    },

    async branks() {
      let result = await this.$u.api.hire.branklist();
      if (result.code) {
        this.branklist = result.data.map((item) => {
          // 循环遍历数据，组装自己想要的key,value把结果return出去
          return {
            brand_id: item.id,
            name: item.name,
            badge: {
              value: item.hiretotal_text,
            },
          };
        });
      }
    },

    toEdit(hireid) {
      this.$u.route(`/pagesC/product/blind/edit`, {
        hireid: hireid,
      });
    },
    scrolltolower() {
      this.list();
    },
  },
};
</script>

<style scoped lang="scss">
.section {
  margin: 60px 0px;
}

.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}

.empty {
  margin-top: 50px;
}

.search {
  width: 70%;
  position: fixed;
  top: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 9%;
  z-index: 999;
}

.card {
  display: flex;
  width: 92%;
  height: 135px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 22px;
    }
  }

  .right {
    width: 62%;
    margin-top: 10px;

    .text {
      h4 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
    }
  }
}

.content {
  background: #ffffff;
}
.btnstyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
